<template>
  <div class="anchor-card">
    <transition name="el-zoom-in-bottom">
      <div v-if="show" class="anchor-list">
        <ul>
          <li v-for="(item, index) in anchorList"
              @click="handleAnchorClick(index)"
              :class="{'checked': item.checked}">
            {{item.title}}
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
import {useUser} from "@/store/userStore";

export default {
  name: 'AnchorCard',
  props: [ 'list' ],
  data() {
    return {
      show: true,
      anchorList: [],
      isActive:[true,false,false,false],
      User:useUser(),
    }
  },
  watch: {
    list: {
      handler(val) {
        this.anchorList = val
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleAnchorClick(index) {
      this.handleAnchorItemChecked(index)
      this.goAnchor(this.anchorList[index].id, index)
      this.User.changeShowTitle(this.anchorList[index].title)
    },
    goAnchor(selector) {
      /*参数selector是id选择器（#anchor14）*/
      // console.log(selector)
      const el = document.getElementById(selector)
      if (el) {
        setTimeout(() => { // 页面没有渲染完成时是无法滚动的，因此设置延迟
          el.scrollIntoView({behavior: 'smooth'}) // js的内置方法，可滚动视图位置至元素位置
        }, 100)
      }
    },
    handleScrollChange() {
      const content = document.getElementsByClassName('files-detail')[0]
      this.handleRecursionListScroll(content, 'form-part')

    },
    handleAnchorItemChecked(index) {
      if (index === 0) {
        this.User.showTitle = '村落概括'
      }else if(index === 1){
        this.User.showTitle = '祠堂'
      }else if(index === 2){
        this.User.showTitle = '一如院子茶馆'
      }else if(index === 3){
        this.User.showTitle = '村落改造'
      }
      const item = this.anchorList[index]
      this.anchorList.forEach(ele => {
        ele.checked = false
      })
      let currentItem = {
        ...item,
        checked: true,
        hideTimestamp: true
      }
      this.anchorList.splice(index, 1, currentItem)
    },
    handleRecursionListScroll(content, className) {
      const items = document.getElementsByClassName(className)
      let tops = []
      for(let i = 0; i < items.length; i++) {
        tops.push(items[i].getBoundingClientRect().top)
      }
      let distances = tops.findIndex(item => {
        return item > 0
      })
      distances = distances === -1 ? tops.length - 1 : distances
      this.handleAnchorItemChecked(distances)
      document.getElementsByClassName('anchor-list')[0].scrollTo({
        behavior: 'smooth',
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .anchor-card {
    width: 25%;
    height: 100%;
    max-height: 520px;
    position: absolute;
    top: 30px;
    left: 0px;

    z-index: 999;
    .anchor-list {
      height: 100%;

      border-radius: 5px;
      background:#ffffff url(./images/huaduo.svg)  no-repeat bottom;
      background-size:200px 200px;
      ul {
        padding: 30px;
        width: 100%;

        li{
          display: flex;
          align-items: center;
          padding-left: 20px;
          width: 100%;
          height: 40px;

        }
      }
    }
  }
  .checked {
    background-color: rgb(231, 244, 255);
    border-right: solid 2px rgb(24, 144, 255);
  }
</style>

